<template>
  <div class="myDynamic">
    <div class="top">
      <div class="head">
        <Theme />
        <ul class="headList">
          <li class="headItem" v-for="(firHead, index) in firHead" :key="index">
            <router-link :to="firHead.to" active-class="headerActive" @click.native="reload">{{
              firHead.name
            }}</router-link>
          </li>
        </ul>
        <Search />
      </div>
      <div class="main">
          <router-view :key="activeDate"></router-view>
      </div>
    </div>
    <MyFoot />
  </div>
</template>

<script type="text/javascript">
import Theme from "../common/Theme.vue";
import Search from "../common/Search.vue";
import MyFoot from "../common/MyFoot.vue";
export default {
    name: "MyDynamic",
    components: {
        Theme,
        Search,
        MyFoot,
    },
    activated() {
        document.getElementsByClassName('main')[0].scrollTop = this.top || 0
        // console.log(this.top)
        // console.log('组件被激活')
    },
    beforeRouteLeave(to, from, next) {
        //离开当前组件之前
        let main = document.getElementsByClassName('main')[0]
        // console.log(main.scrollTop)
        this.top = main.scrollTop || 0,
        // 设置下一个路由的 meta
        // to.meta.keepAlive = false; // 设置下一个路由不缓存，即刷新
        next()
    },
    // deactivated() {
    //     console.log('组件离开')
    // },
    data() {
        return {
            firHead: [
                {name: "关注",to: "/dynamic/follow",},
                {name: "推荐",to: "/dynamic/recommend",},
                // {name: "最新",to: "/dynamic/newest",},
            ],
            top:null,
            activeDate:null
        };
    },
    methods:{
        reload(){
            this.$router.go(0);
            // this.activeDate = new Date().getTime()
        }
    }
};
</script>

<style lang="less" scoped>
.myDynamic {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head {
  height: 0.6rem;
  background-color: var(--themeColor);
  display: flex;
  justify-content: space-between;
  // background-color: var(--themeColor);
  color: white;
  padding: 0.3rem 0;
  .headList {
    list-style: none;
    flex: 1;
    text-align: center;
    margin: 0rem 0.4rem;
    font-size: @fontSmall;
    overflow-x: auto;
    white-space: nowrap;
  }
  .headList::-webkit-scrollbar {
    display: none;
  }
}

.headItem {
  display: inline;
  a {
    color: white;
  }
}
.headItem:not(:last-child) {
  margin-right: 1rem;
}
i {
  display: flex;
  align-items: center;
}
a {
  white-space: nowrap;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.headerActive {
  font-size: 0.5rem;
}
</style>
